<!--照片墙-->
<template>
  <div class="picture">
    <!--面包屑-->
    <div class="crumbs">
      <Crumbs :crumbs_title="crumbs_title"/>
    </div>
    <!--活动及品牌新闻列表-->
    <div class="picture-wall">
      <div style="height:100px;">&nbsp;</div>
      <div class="shijian">
        <a href="#" class="btn prev">
          <img src="../../assets/images/riqi_icon.jpg" width="19" height="19"/>
        </a>
        <span>JANUARY · 2014</span>
        <a href="#" class="btn next">
          <img src="../../assets/images/riqi_icon1.jpg" width="19" height="19"/>
        </a>
      </div>
      <div style="width:97px; float:left;">&nbsp;</div>
      <div class="shijian1">
        <ul>
          <li style="color:#b50109;">SUN</li>
          <li>MON</li>
          <li>TUE</li>
          <li>WED</li>
          <li>THU</li>
          <li>FRI</li>
          <li style="color:#20209c;">SAT</li>
        </ul>
      </div>
      <div style="width:97px; float:left;">&nbsp;</div>
      <div class="picture1">
        <dl style="margin-left:0px;">
          <dt></dt>
          <dd></dd>
        </dl>
        <dl v-for="index in 34" :key="index">
          <dt>
            <a href="#" class="pirobox_gall"
               title="在其业务活动主要包括销售产品的个人信息的目的的个人信息， 这是可能的 我允许使用在必要的程度为以下目的使用。">
              <img src="../../assets/uploadfiles/image/temp/xin_img.jpg" width="78" height="90"/>
            </a>
          </dt>
          <dd>
            <a href="#">1</a>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
import Crumbs from '@/components/Crumbs'

export default {
  name: 'Picture',
  data () {
    return {
      crumbs_title: '照片墙'
    }
  },
  components: {
    Crumbs
  }
}
</script>

<style scoped lang="less">
.picture {
  // 照片墙的样式
  .picture-wall {
    background: url("../../assets/images/wall_bg.png") no-repeat;
    width: 905px;
    height: 911px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    box-sizing: border-box;
    margin-bottom: 40px;

    .shijian {
      width: 240px;
      height: 25px;
      overflow: hidden;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 20px;

      .prev {
        float: left;
      }

      span {
        font-family: Arial;
        font-size: 16px;
        font-weight: bold;
        color: #186289;
        float: left;
        width: 176px;
        height: 19px;
        line-height: 19px;
        overflow: hidden;
        text-align: center;
        margin-left: 12px;
      }

      .next {
        float: right;
      }
    }

    .shijian1 {
      width: 722px;
      height: 30px;
      margin: 0 auto;

      ul {
        width: 100%;
        height: 100%;
        background: #FFF;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding-left: 0;

        li {
          font-size: 16px;
          font-family: Arial, Helvetica, sans-serif;
          font-weight: bold;
          width: 103px;
          //text-align: center;
          //height: 30px;
          //line-height: 30px;
          //color: #5998b9;
          //margin-top: 2px;
          list-style: none;
        }
      }
    }

    .picture1 {
      width: 722px;
      height: 660px;
      margin: 0 auto;
      padding-top: 20px;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      transform: translateX(-47px);

      dl {
        //float: left;
        width: 90px;
        height: 116px;
        background: url("../../assets/images/pictureimg_bg.jpg") no-repeat;
        margin: 5px;
        box-sizing: border-box;
        dt{
          img{
            transform: translateY(5px);
          }
        }
        dd{
          text-align: left;
          margin-left: 7px;
          a{
            text-decoration: none;
            color: #acacac;
            font-weight: 700;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
